<template>
  <div class="selectAble">
    <el-select v-model="selected" ref="select" filterable reserve-keyword class="selWidth" clearable
      :multiple="multiple" placeholder="请输入关键词检索" :filter-method="remoteMethod" :loading="loading" :disabled="disabled"
      @change="selectUser">
      <!-- //默认用户标题 -->
      <div class="label dropdown" v-if="type == ''">
        <span>Id</span>
        <span>昵称</span>
        <span>手机号</span>
      </div>
      <!-- 其他类型标题使用插槽 -->
      <div class="label dropdown" v-else>
        <slot name="dropdownTitle"></slot>
      </div>
      <el-option v-for="item in lists" :key="item[listValue]" :label="item[listLabel]" :value="item[listValue]">
        <!-- //默认用户列表 -->
        <div class="dropdown" v-if="type == ''">
          <span>{{ item.uid }}</span>
          <span>{{ item.nickname }}</span>
          <span>{{ item.phone }}</span>
        </div>
        <!-- 其他类型使用插槽 -->
        <div class="dropdown">
          <slot name="dropdown" :item="item"> </slot>
        </div>
      </el-option>
    </el-select>
    <!-- <el-button
      v-show="!disabled"
      icon="el-icon-arrow-down"
      @click="selectPage"
    ></el-button> -->
  </div>
</template>

<script>
import {
  userListApi,
  getTradeSignList,
  getMasterAccountType,
  getTMyList
} from "@/api/user";
import { adminGetOption } from "@/api/dataField";
import { datafieldList } from "@/api/dataField";

import { getCountry } from "@/api/language"

export default {
  data() {
    return {
      selected: null,
      lists: [],
      loading: false,
      page: 1,
      limit: 10,
      listLabel: "nickName",
      listValue: "uid",
      dropdownTitle: false,
    };
  },
  props: {
    //传递出去的id
    id: {
      type: [Number, Array, String],
      default: "",
    },
    //查询列表参数集合
    params: {
      type: Object,
      default: () => ({}),
    },
    //查询列表类型
    type: {
      type: String,
      default: "",
    },
    //有值时回显的label
    label: {
      type: [String, Array],
      default: "",
    },
    //是否多选
    multiple: {
      type: Boolean,
      default: false,
    },
    //是否禁用
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  model: {
    prop: "id",
    event: "update:id",
  },
  watch: {
    async id(newId, oldId) {
      if (newId !== oldId) {
        // 当id变化时，同步selected的值 以及列表的值
        this.selected = newId || "";
        // await this.createList();
      }
    },
  },
  async created() {
    console.log(this.$slots, 22222222222222);
    this.setLabelValue();
    console.log(this.label);
    // this.selected = this.label ? this.label : this.id || "";
    await this.remoteMethod();
    // await this.createList();
    // console.log(this.params)
  },
  updated() {
    //获取初始Id,同步selected的值 以及列表的值
    this.selected = this.label ? this.label : this.id || "";
  },
  methods: {
    //根据是否多选动态以及初始ID创建初始lists
    async createList() {
      console.log(this.selected, this.label, 22);
      console.log("🚀🚀🚀 ~ createList ~ this.lists:", this.lists);
      let list = [];
      if (this.selected) {
        if (this.multiple) {
          list = this.listLabel.map((label, index) => ({
            [label]: this.label[index],
            [this.listValue[index]]: this.id[index],
          }));
          this.lists.unshift(...list);
        } else {
          list = [{ [this.listLabel]: this.label, [this.listValue]: this.id }];
          this.lists.unshift(...list);
        }
      } else {
        //初始ID为空时清空列表
        // this.lists = [];
      }
    },
    // selectPage() {
    //   this.remoteMethod();
    //   this.$refs.select.focus();
    // },
    // 不同Type查询不同列表接口
    async remoteMethod(query) {
      console.log(this.type, 22);
      // console.log('查询父组件传过来的参数：', this.params)
      try {
        let params = this.params;
        if (query !== "") {
          this.loading = true;
          let data = {
            page: this.page,
            limit: this.limit,
            keywords: query,
            ...params,
          };
          switch (this.type) {
            //type不传查询用户列表
            case "":
              await this.getUserList(data);
              break;
            //交易账户列表
            case "traderaccount":
              await this.getTradeSignList(data);
              break;
            // 根据账号类型查询账户
            case "getMasterAccountType":
              await this.getMasterAccountType(data);
              break;
            // 管理员列表
            case "adminGetOption":
              await this.adminGetOption(data);
              break;
            // 数据场列表
            case "datafieldList":
              await this.datafieldList(data);
              break;
            //交易员信号列表
            case "tradersignal":
              await this.getTMyList(data);
              break;
            // 国家列表
            case "getCountry":
              await this.getCountry(data);
              break;
            default:
              break;
          }
          // await this.createList();
          this.loading = false;
        } else {
          this.users = [];
        }
      } catch (error) {
        console.log(error);
      }
    },
    // 根据 this.type 的值返回不同的 label  Value
    setLabelValue() {
      switch (this.type) {
        case "":
          this.listLabel = "nickname";
          this.listValue = "uid";
          break;
        case "traderaccount":
          this.listLabel = "nickName";
          this.listValue = "id";
          break;
        case "getMasterAccountType":
          // this.listLabel = "nickName"; 
          // 根据交易账户类型选择对应的label
          this.listLabel = this.params.traderAccountType == 2 ? "nickName" : 'account';
          this.listValue = "id";
          break;
        case "adminGetOption":
          this.listLabel = "realName";
          this.listValue = "id";
          break;
        case "datafieldList":
          this.listLabel = "name";
          this.listValue = "id";
          break;

        // 交易员信号
        case "tradersignal":
          this.listLabel = "userName";
          this.listValue = "id";
          break;

        //国家列表
        case "getCountry":
          this.listLabel = "countryName";
          this.listValue = "countryId";
          break;

        default:
          break;
      }
    },
    // 用户列表
    async getUserList(data) {
      await userListApi(data)
        .then((res) => {
          console.log("用户列表", res);
          this.lists = res.list;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 交易账号列表
    async getTradeSignList(data) {
      await getTradeSignList(data)
        .then((res) => {
          console.log("交易账号列表", res);
          this.lists = res.list;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 查询跟单账号列表
    async getMasterAccountType(data) {
      await getMasterAccountType(data)
        .then((res) => {
          console.log("跟单账号列表", res);
          this.lists = res.list;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 管理员列表
    async adminGetOption(data) {
      await adminGetOption(data)
        .then((res) => {
          console.log("管理员列表", res);
          this.lists = res;
        })
        .catch((err) => {
          console.log(err);
        });
    },

    // 数据场列表
    async datafieldList(data) {
      await datafieldList(data)
        .then((res) => {
          console.log("数据场列表", res);
          this.lists = res.list;
        })
        .catch((err) => {
          console.log(err);
        });
    },

    // 交易员信号列表
    async getTMyList(data) {
      await getTMyList(data)
        .then((res) => {
          console.log("交易员信号", res);
          this.lists = res.list;
        })
        .catch((err) => {
          console.log(err);
        });
    },

    // 获取国家列表
    async getCountry(data) {
      await getCountry(data)
        .then((res) => {
          console.log("国家列表数据：", res);
          this.lists = res.list;
        })
        .catch((err) => {
          console.log(err);
        });
    },

    //选择后同步父组件
    selectUser(res) {
      console.log(this.selected);
      this.$emit("update:id", this.selected);
    },
  },
};
</script>
<style lang="scss" scoped>
.selectAble {
  display: flex;
}

.label {
  font-size: 15px;
  padding: 0 20px;
  white-space: nowrap;
  font-weight: bold;
  color: #606266;
  // height: 34px;
  line-height: 34px;

  ::v-deep span {
    height: 34px;
    width: 86px;
  }
}

.dropdown {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
</style>